<template>
    <div id="loader-wrapper" :class="loaded">
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>
    <div class="cover">
        <img src="./img/bg.jfif" alt="" class="bg">
    </div>
    <div class="main">
        <div class="container">
            <div class="content-wrapper">
                <div class="content-left">
                    <div>
                        <div class="logo">
                            <img src="./img/logo.png" alt="" class="logo-img">
                            <div class="name text-hidden long">
                                <span>mister Chen</span>
                                <br>
                                <!-- <span>Chen AND Gu</span> -->
                            </div>
                        </div>
                        <div class="description cards">
                            <div class="flex justify-between text-[#fff] text-base">
                                <span class="xicon"><!-- SVG --></span>
                                <div class="text-introduction">
                                    <p>Hello World !</p>
                                    <p>陈先森的博客小站</p>
                                </div>
                                <span class="xicon"><!-- SVG --></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-right">
                    <div class="info-cards">
                        <div class="hitokoto cards">
                            <div class="hitokoto-content">
                                <span class="mryj">{{ mryj }}</span>
                                <span class="from">-「{{ author }}」</span>
                            </div>
                        </div>
                        <div class="hitokoto cards">
                            <div class="date-content">
                                <div class="date-text">
                                    <span>{{ year }} 年 </span>
                                    <span>{{ month }} 月 </span>
                                    <span>{{ day }} 日 </span>
                                    <span>{{ weekDay }}</span>
                                </div>
                                <div class="time-text">
                                    <span class="currentTime">{{ currentTime }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="nav-section">
                        <div class="line">
                            <span class="text-[20px]"><!-- SVG --></span>
                            <span class="ml-[10px]">网站列表</span>
                        </div>
                        <div class="site-links cards">
                            <router-link v-for="link in siteLinks" :key="link.path" :to="link.path" class="site-link">
                                <span class="link-icon">{{ link.icon }}</span>
                                <span class="link-name">{{ link.name }}</span>
                                <span class="link-desc">{{ link.desc }}</span>
                            </router-link>
                            <router-link to="/photos" class="site-link">
                                <span class="link-icon">🖼️</span>
                                <span class="link-name">照片墙</span>
                                <span class="link-desc">查看所有照片</span>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup name="Index">
import { ref, reactive, onMounted } from "vue"
import homepage from '../../http/apis/home/homepage'

let mryj = ref('')
let author = ref('')
const year = ref();
const month = ref();
const day = ref();
const weekDay = ref();
const currentTime = ref('');
// 开场动效
let loaded = ref('')
setTimeout(() => loaded.value = 'loaded', 200)

const lzmy = async () => {
    const response = await homepage.querylzmy()
    console.log(response);
    if (response.code == '200') {
        mryj.value = response.result.saying
        author.value = response.result.source
    }
}

lzmy()

// 时间
setInterval(() => {
    const date = new Date();
    year.value = date.getFullYear()
    month.value = date.getMonth() * 1 + 1 < 10 ? '0' + (date.getMonth() * 1 + 1) : date.getMonth()
    day.value = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
    weekDay.value = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][date.getDay()];
    currentTime.value = `${date.getHours()}:${date.getMinutes() < 10 ? '0' + (date.getMinutes() * 1 + 1) : date.getMinutes()}:${date.getSeconds() < 10 ? '0' + (date.getSeconds() * 1) : date.getSeconds()}`;
}, 1000);

const siteLinks = [
    {
        path: '/tech',
        name: '技术博客',
        desc: '分享编程技术与开发心得',
        icon: '💻'
    },
    {
        path: '/life',
        name: '生活随笔',
        desc: '记录生活点滴与日常感悟',
        icon: '📝'
    },
    {
        path: '/about',
        name: '关于我',
        desc: '了解更多关于我的故事',
        icon: '👨‍💻'
    },
    {
        path: '/guestbook',
        name: '留言板',
        desc: '期待与你的交流互动',
        icon: '📢'
    },
    {
        path: '/private',
        name: '私密空间',
        desc: '个人投资与生活记录',
        icon: '🔒'
    },
    {
        path: '/moments',
        name: '说说',
        desc: '分享生活点滴与想法',
        icon: '💭'
    }
]
</script>

<style scoped>
.loaded {
    visibility: hidden;
    transform: translateY(-100%);
    transition: transform .3s 1s ease-out, visibility .3s 1s ease-out;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    overflow: hidden;
}

#loader-wrapper.loaded .loader-section.section-left {
    transform: translate(-100%);
    transition: transform .5s .3s cubic-bezier(.645, .045, .355, 1);
}

#loader-wrapper.loaded .loader-section.section-right {
    transform: translate(100%);
    transition: transform .5s .3s cubic-bezier(.645, .045, .355, 1);
}

#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background: #333;
    z-index: 1;
}

#loader-wrapper .loader-section.section-left {
    left: 0;
}

#loader-wrapper .loader-section.section-right {
    right: 0;
}

.main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    min-height: 100vh;
}

.content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
    gap: 2rem;
    min-height: 100vh;
}

.content-left,
.content-right {
    width: 50%;
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .25s;
    /* z-index: -1; */
}

.cover .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    backface-visibility: hidden;
    filter: blur(20px) brightness(.3);
    transition: filter .3s, transform .3s;
    animation: fade-blur-in .8s cubic-bezier(.25, .46, .45, .94) forwards;
    animation-delay: .45s;
}

.description {
    margin-top: 3.5rem;
    max-width: 460px;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    padding: 1rem;
    animation: 0.5s ease 0s 1 normal none running fade;
}

.cards {
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    transform: scale(1);
    border-radius: 6px;
    transition: backdrop-filter 0.3s ease 0s, transform 0.3s ease 0s;
}

.cards:hover {
    transform: scale(1.01);
}

.xicon {
    width: 1em;
    height: 1em;
    display: inline-flex;
    color: #fff;
}

.text-introduction {
    margin: 0.75rem 1rem;
    line-height: 2rem;
    margin-right: auto;
    transition: opacity .2s;
}

.text-introduction p:nth-of-type(1) {
    font-family: Impact;
}

.xicon:nth-of-type(2) {
    align-self: flex-end;
}

.name {
    width: 100%;
    font-family: FZSTK;
    margin-left: 1.5rem;
}

.name span {
    font-size: 2.5rem;
}

.text-hidden {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    animation: fade .5s;
    max-width: 460px;
}

.logo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.hitokoto {
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hitokoto-content,
.date-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mryj {
    font-size: 1.1rem;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.from {
    margin-top: 10px;
    font-weight: 700;
    align-self: flex-end;
    font-size: 1.1rem;
}

.currentTime {
    font-family: 'FZHC';
    letter-spacing: 6px;
}

.line {
    margin: 2rem 0.25rem 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    animation: fade .5s;
}

@keyframes fade-blur-in {
    0% {
        filter: blur(20px) brightness(.3);
        transform: scale(1.6);
    }

    100% {
        filter: blur(0) brightness(1);
        transform: scale(1);
    }
}

@keyframes fade-blur-main-in {
    0% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.site-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.site-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.site-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.link-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.link-name {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.link-desc {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 0;
        min-height: auto;
    }

    .content-left,
    .content-right {
        width: 100%;
    }

    .info-cards {
        grid-template-columns: 1fr;
    }

    .logo {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .logo-img {
        width: 100px;
        height: 100px;
        margin-bottom: 1rem;
    }

    .name {
        margin-left: 0;
        text-align: center;
    }

    .name span {
        font-size: 2rem;
    }

    .site-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-top: 1rem;
    }

    .site-link {
        flex-direction: row;
        align-items: center;
        padding: 1rem;
        gap: 0.75rem;
    }

    .link-icon {
        font-size: 1.5rem;
        margin: 0;
    }

    .link-name {
        font-size: 1rem;
        margin: 0;
    }

    .link-desc {
        display: none;
    }

    .date-text {
        font-size: 1rem;
    }

    .time-text {
        font-size: 2.5rem;
    }

    .content-wrapper {
        padding: 1rem 0;
        min-height: auto;
    }

    .hitokoto {
        padding: 1rem;
    }

    .content-right {
        margin-bottom: 2rem;
    }

    .line {
        cursor: default;
    }
}

/* 平板端优化 */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 2rem;
    }

    .site-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .time-text {
        font-size: 2.75rem;
    }
}

/* 确保大屏幕也不会出现横向滚动 */
@media (min-width: 1025px) {
    .main {
        overflow-x: hidden;
    }
}

.w-1200 {
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

/* 动画效果 */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 修改日期时间相关样式 */
.date-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.date-text {
    font-size: 1.1rem;
}

.time-text {
    font-size: 3.25rem;
}

.currentTime {
    font-family: 'FZHC';
    letter-spacing: 6px;
}

/* 修改主容器样式，添加滚动 */
.main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    min-height: 100vh;
}

.content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
    gap: 2rem;
    min-height: 100vh;
}

.photos-link {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #5b25c3; /* 按钮背景色 */
    color: white; /* 按钮文字颜色 */
    border-radius: 5px; /* 圆角 */
    text-decoration: none; /* 去掉下划线 */
    font-size: 1.2rem; /* 字体大小 */
    transition: background-color 0.3s; /* 背景色过渡效果 */
}

.photos-link:hover {
    background-color: #297db6; /* 悬停时的背景色 */
}
</style>
